.login {
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(to bottom, #027dca, #42d6f4);
  overflow: hidden;
  .iconfont {
    &::before {
      font-size: 40px;
    }
  }

  .avatar-box {
    width: 160px;
    height: 160px;
    margin: 200px auto 100px;
    background: #fff;
    border-radius: 50%;
  }
  .input-box {
    width: 80%;
    min-width: 320px;
    margin: 0 auto 60px;
    height: auto;
    border-bottom: 1px solid #fff;
    .input {
      background: transparent;
      border: none;
      width: 100%;
      padding: 16px 0;
      caret-color: #000;
      color: #fff;
      margin-left: 16px;
      font-size: 28px;
      &::placeholder {
        color: rgba(255, 255, 255, 0.5);
        font-size: 28px;
      }
    }
    .icon {
      font-size: 40px;
    }
  }
  .login-btn {
    width: 80%;
    margin: 0 auto 40px;
    padding: 24px 0;
    font-size: 36px;
    text-align: center;
    // background: #fcfcfc;
    border-radius: 16px;
    // color: #2394c7;
    .c-button-btn {
      background: none;
      padding: 0;
    }
  }

  .register {
    color: #fff;
    width: 80%;
    margin: 0 auto 80px;
    font-size: 24px;
  }
  .curve {
    position: relative;
    height: 300px;
  }
  .eye {
    color: #fff;
  }
  .get-code {
    padding: 12px 24px;
    border-radius: 6px;
    background: rgb(245, 157, 122);
    color: #fff;
  }
}
